<template>
  <div class="rank-container">
    <div class="rank-header">
      <h2>昨日热门帖子排行榜</h2>
      <p class="rank-description">根据昨天点赞数和评论数综合排序的热门帖子</p>
    </div>
    
    <div class="rank-content">
      <el-table
        v-loading="loading"
        :data="rankList"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="rank"
          label="排名"
          width="80"
          align="center">
          <template slot-scope="scope">
            <div class="rank-number" :class="getRankClass(scope.row.rank)">
              {{ scope.row.rank }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="tipTitel"
          label="标题"
          min-width="200">
          <template slot-scope="scope">
            <div class="tip-item">
              <div class="tip-image">
                <img 
                  :src="scope.row.tipPictrue || require('@/assets/no-image.png')" 
                  :alt="scope.row.tipPictrue ? '帖子图片' : '无图片'" 
                  @click="goToDetail(scope.row.tipId)"
                >
              </div>
              <div class="tip-info">
                <a @click="goToDetail(scope.row.tipId)" class="tip-title-link">
                  {{ scope.row.tipTitel}}
                </a>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="tipUserN"
          label="作者"
          width="150">
          <template slot-scope="scope">
            <div class="user-info">
              <el-avatar :size="30" :src="scope.row.tipUserPic || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="user-avatar"></el-avatar>
              <span class="user-name">{{ scope.row.tipUserN }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="tipTime"
          label="发布时间"
          width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.tipTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="tipGoods"
          label="点赞"
          width="80"
          align="center">
          <template slot-scope="scope">
            <span class="count-badge like-badge">{{ scope.row.tipGoods }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tipComments"
          label="评论"
          width="80"
          align="center">
          <template slot-scope="scope">
            <span class="count-badge comment-badge">{{ scope.row.tipComments }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tipViews"
          label="浏览"
          width="80"
          align="center">
          <template slot-scope="scope">
            <span class="count-badge view-badge">{{ scope.row.tipViews }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    
    <!-- 帖子预览卡片 -->
    <div class="preview-cards">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in rankList.slice(0, 3)" :key="index">
          <div class="preview-card" :class="getRankClass(item.rank)">
            <div class="preview-rank">{{ item.rank }}</div>
            <div class="preview-image" >
              <img :src="item.tipPictrue|| require('@/assets/no-image.png')" alt="帖子图片">
            </div>
            <div class="preview-content">
              <h3 class="preview-title" @click="goToDetail(item.tipId)">{{ item.tipTitel }}</h3>
              <div class="preview-meta">
                <div class="preview-author">
                  <el-avatar :size="24" :src="item.tipUserPic || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
                  <span>{{ item.tipUserN }}</span>
                </div>
                <div class="preview-stats">
                  <span><i class="el-icon-view"></i> {{ item.tipViews }}</span>
                  <span><i class="el-icon-star-on"></i> {{ item.tipGoods }}</span>
                  <span><i class="el-icon-chat-dot-round"></i> {{ item.tipComments }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getRankOfTip } from '@/api/api';

export default {
  name: 'TipByRank',
  data() {
    return {
      rankList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.fetchRankData();
  },
  methods: {
    async fetchRankData() {
      this.loading = true;
      try {
        const response = await getRankOfTip({
          PageNumber: this.currentPage,
          PageSize: this.pageSize
        });
        if (response?.data?.message === "成功") {
          const pageInfo = response.data.data;
          this.rankList = pageInfo.list || [];
          console.log('获取排行榜数据成功:', this.rankList);
          this.total = pageInfo.total || 0;
          
          // 为每条数据添加排名
          this.rankList.forEach((item, index) => {
            item.rank = (this.currentPage - 1) * this.pageSize + index + 1;
          });
        } else {
          this.$message.error('获取排行榜数据失败');
        }
      } catch (error) {
        console.error('获取排行榜数据失败:', error);
        this.$message.error('服务器错误，请稍后再试');
      } finally {
        this.loading = false;
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchRankData();
    },
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    getRankClass(rank) {
      if (rank === 1) return 'rank-first';
      if (rank === 2) return 'rank-second';
      if (rank === 3) return 'rank-third';
      return 'rank-other';
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'even-row';
      } else {
        return 'odd-row';
      }
    },
    goToDetail(tipId) {
      this.$router.push({path: '/Main/forum/detail', query: {tipId: tipId}});
    }
  }
};
</script>

<style scoped>
.rank-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.rank-header {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.rank-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.rank-header h2:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border-radius: 3px;
}

.rank-description {
  color: #666;
  font-size: 14px;
}

.rank-content {
  margin-top: 20px;
  margin-bottom: 20px;
}

.rank-number {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.rank-first {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #fff;
  transform: scale(1.1);
}

.rank-second {
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
  color: #fff;
  transform: scale(1.05);
}

.rank-third {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
  color: #fff;
}

.rank-other {
  background-color: #f5f7fa;
  color: #606266;
}

.tip-title-link {
  color: #409EFF;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tip-title-link:hover {
  color: #66b1ff;
  text-decoration: underline;
  transform: translateX(5px);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-name {
  font-size: 14px;
  color: #606266;
}

.count-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.like-badge {
  background-color: #fef0f0;
  color: #f56c6c;
}

.comment-badge {
  background-color: #f0f9eb;
  color: #67c23a;
}

.view-badge {
  background-color: #ecf5ff;
  color: #409eff;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
  padding: 15px 0;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.even-row {
  background-color: #f9f9f9;
}

.odd-row {
  background-color: #fff;
}

/* 预览卡片样式 */
.preview-cards {
  margin-top: 30px;
}

.preview-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s;
  height: 300px;
  margin-bottom: 20px;
  background-color: #fff;
}

.preview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.preview-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

.preview-image {
  height: 150px;
  overflow: hidden;
}

.preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.preview-card:hover .preview-image img {
  transform: scale(1.1);
}

.preview-content {
  padding: 15px;
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 44px;
}

.preview-title:hover {
  color: #409EFF;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.preview-author {
  display: flex;
  align-items: center;
}

.preview-author span {
  margin-left: 8px;
  font-size: 12px;
  color: #606266;
}

.preview-stats {
  display: flex;
  gap: 8px;
}

.preview-stats span {
  font-size: 12px;
  color: #909399;
}

.preview-stats i {
  margin-right: 2px;
}

/* 排名卡片样式 */
.rank-first.preview-card {
  border: 2px solid #FFD700;
}

.rank-second.preview-card {
  border: 2px solid #C0C0C0;
}

.rank-third.preview-card {
  border: 2px solid #CD7F32;
}

.rank-first .preview-rank {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.rank-second .preview-rank {
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
}

.rank-third .preview-rank {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
}

.rank-other .preview-rank {
  background-color: #f5f7fa;
  color: #606266;
}

/* 暗黑模式适配 */
:deep(.dark-mode) .rank-container {
  background-color: #1f2937;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

:deep(.dark-mode) .rank-header h2 {
  color: #e5e7eb;
}

:deep(.dark-mode) .rank-description {
  color: #9ca3af;
}

:deep(.dark-mode) .tip-title-link {
  color: #60a5fa;
}

:deep(.dark-mode) .tip-title-link:hover {
  color: #93c5fd;
}

:deep(.dark-mode) .user-name {
  color: #e5e7eb;
}

:deep(.dark-mode) .preview-card {
  background-color: #1f2937;
}

:deep(.dark-mode) .preview-title {
  color: #e5e7eb;
}

:deep(.dark-mode) .preview-author span {
  color: #e5e7eb;
}

:deep(.dark-mode) .preview-stats span {
  color: #9ca3af;
}

:deep(.dark-mode) .pagination-container {
  background-color: #374151;
}

.tip-item {
  display: flex;
  align-items: center;
}

.tip-image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.tip-info {
  flex: 1;
  overflow: hidden;
}

:deep(.dark-mode) .tip-image {
  background-color: #374151;
  border: 1px solid #4b5563;
}
</style>
